<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件插槽(slot)</title>
		<script src="../libs/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="root">
			<!-- //普通插槽*/ -->
			<my-content>
				<div>slot content</div>
			</my-content>
			<hr />
			<!-- //具名插槽 -->
			<my-name-content>
				<div slot='header'>header </div>
				<div slot='fotter'>fotter </div>
			</my-name-content>
			
			<my-button>
				确定
			</my-button>
			
		</div>
		<script>
			
			Vue.component('my-content',{
				data:function(){
					return {
						msg: 'default msg'
					}
				},
				template:`<div>
								<slot></slot>
								{{msg}}
								<slot></slot>
						  </div>`
				
			});
			
			Vue.component('my-name-content', {
				data:function(){
					return {
						msg: 'default msg'
					}
				},
				template: `<div>
							<slot name="header"></slot>
							{{msg}}
							<slot name="fotter"></slot>
						  </div>`
			});
			
			Vue.component('my-button',{
				data:function(){
					return {
						defaultTxt:'提交'
					}
				},
				template:`
						<button>
							<slot>{{defaultTxt}}</slot>
						</button>
					`
			});
			
			var vm = new Vue({
				el:'#root'
				
			});
		</script>
		
	</body>
</html>
